import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import {
    Tabs, Toast, Flex, Card, Button
} from 'antd-mobile';
import { dateFormat } from "../../model/code";
import http from "../../model/http";
import code from "../../model/code";
import { Calendar } from 'react-h5-calendar';
import Header from "../../components/header/Header";
import './returnVisit.less'
import status1 from '../../libs/img/user/historyStatus1.png'
import status2 from '../../libs/img/user/historyStatus2.png'
import status3 from '../../libs/img/user/historyStatus3.png'

/**
 * @name 判断iOS
 */
 const isiOS = ()=>{
    let u = navigator.userAgent;
    let iOs = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端\
    return iOs;
}
function ReturnVisit() { 
    const history = useHistory();
     
    const [tabsData, setTabsData] = useState([])
    const [customerCrmId, setCustomerCrmId] = useState('')
    const [customerName, setCustomerName] = useState('')
    const [visitList, setVisitList] = useState([])
    const [isiOSBool,setIsiOSBool] = useState(false)
    // const tabs = [
    //     { title: '1', value: 'DE0011' },
    //     { title: '2', value: 'DE0012' },
    //     { title: '3', value: 'DE0013' },
    //     { title: '4', value: 'DE0014' },
    //     { title: '5', value: 'DE0045' },
    // ];
    const getOutUser = async (outUserId) => {
        const data = await http.post('/customer/checkCustomerBindoutUserId', { outUserId });
        if (data.isBind === 1) {
            return
        } else {
            history.push('/user')
        }

    }
    /*渲染完成*/
    useEffect(async () => {
        // 判断是否绑定
        await code.checkBind()
        const result = await code.getContext()
        if (result == "single_chat_tools" || result == "contact_profile") {
            // 获取外部联系人
            const outUserId = await code.getOutUserId()
            getOutUser(outUserId)
            const data = await http.post('/customer/checkCustomerBindoutUserId', { outUserId }); 
            setCustomerName(data.data[0].customerName)
            if (data.isBind === 1) {
                getFeedback(data.data[0].customerCrmId)
                setCustomerCrmId(data.data[0].customerCrmId)
            }
        }

        if(isiOS() == true){
            setIsiOSBool(true)
        }

    }, [])

    const getFeedback = async (id) => {
        const tabs = await http.post('/feedback/getFeedbackCustomer', {
            customerCrmId: id
        })
        console.log(tabs)
        if (tabs.code == 0) {
            let newTabs = tabs.data.map(item => {
                return {
                    title: `${item.scout_theme}(${item.counts})`,
                    crm_type: item.crm_type,
                    counts: item.counts
                }
            })
            setTabsData(newTabs)
            getFeedbackList(id, newTabs[0].title, newTabs[0].crm_type)

        } else {
            Toast.fail(tabs.msg)
        }
    }

    const getFeedbackList = async (id, title, type) => {
        const list = await http.post('/feedback/getFeedbackCustomerList', {
            customerCrmId: id,
            scout_theme: title.match(/(\S*)\(/)[1],
            crm_type: type,
        })
        console.log(list)
        if (list.code == 0) {
            setVisitList(list.data)
        } else {
            Toast.fail(list.msg)
        }
    }

    // 点击tabs
    const tabsClick = (v) => {
        console.log(v)
        getFeedbackList(customerCrmId, v.title, v.crm_type)

    }

    // 新增
    const nextStep = () => {
        //  来自 聊天工具栏 1


        console.log('工具栏') 
        history.push(`/clientReview/add`,{
            customerName:customerName,
            customerCrmId:customerCrmId,
            originId:1
        })
    }







    return (
        <div className="v-return-visit">
            <div className='body-background-div'></div>
            <Tabs tabs={tabsData} swipeable renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />} onChange={(v) => tabsClick(v)}>
                <div>
                    <div className="edit-card-box">
                        {visitList.length > 0 ? visitList.map((item, idx) => (

                            <Card className="card-edit-list" style={{position:'relative'}}>
                                <Card.Body>
                                    <div className="card-edit-flex-box">
                                        <p>回访时间：</p><span>{item.actual_scout_date}</span>
                                        <div className="clear"></div>
                                    </div>
                                    <div className="card-edit-flex-box">
                                        <p>回访方式：</p><span>{item.scout_mode_name}</span>
                                        <div className="clear"></div>
                                    </div>
                                    <div className="card-edit-flex-box">
                                        <p>回访来源：</p><span>{item.task_source_name}</span>
                                        <div className="clear"></div>
                                    </div>
                                    <div className="card-edit-flex-box">
                                        <p>沟通状态：</p><span>{item.reveive_state_name}</span>
                                        <div className="clear"></div>
                                    </div>
                                    <div className="card-edit-flex-box">
                                        <p>回访目的：</p><span>{item.scout_purpose}</span>
                                        <div className="clear"></div>
                                    </div>
                                    <div className="card-edit-flex-box">
                                        <p>回访内容：</p><span>{item.scout_content}</span>
                                        <div className="clear"></div>
                                    </div>
                                    <div className="card-edit-flex-box">
                                        <p>回访员工：</p><span>{item.actual_scout_man_name}</span>
                                        {/* <span style={item.scout_state == 1 ? { color: '#2E8B57' } : (item.scout_state == 0 ? { color: '#FF4500' } : { color: '#808080' })} className="scount-name-color">{item.scout_state_name}</span> */}
                                        <span className="scount-name-color"><img src={item.scout_state == 1 ? status1 : (item.scout_state == 0 ? status2 : status3)} /></span>
                                        <div className="clear"></div>
                                    </div>


                                </Card.Body>

                            </Card>))

                            : <div className='test-color'>暂无更多数据</div>}
                    </div>
                </div>

            </Tabs>
            <Button className={isiOSBool?'frequency-next-step2':'frequency-next-step'} type="warning"  onClick={nextStep}>新增回访</Button>
            {/* <Header /> */}
        </div>
    )
}
export default ReturnVisit;